<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品添加</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="../js/lib-master/index.js"></script>
  
    <link rel="stylesheet" href="../js/lib-master/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/photoWall.css">
    <script src="/js/jquery.js"></script>
    <style>
        body{
            font-size: 16px;
        }
        .el-input {
            width: 300px;
            
        }
    </style>
</head>
<body>
    <div  id="app">
          <form action="" v-if="!addInfo">
            商品名称 <el-input placeholder="输入商品名称" v-model="productModel.productName" ></el-input><br /><br />


            商品类型 
            <el-select v-model="productModel.categoryID" filterable placeholder="请选择">
              <el-option v-for="item in categoryData" :key="item.categoryID" :label="item.categoryName" :value="item.categoryID">{{item.categoryName}}</el-option>
            </el-select><br/><br/>

            商品底价 <el-input placeholder="输入商品底价" v-model="productModel.productPrice" ></el-input><br /><br />
            
              
            商品简介<br /><br /> 
            <textarea placeholder="商品简介" name="proAbout" id="proAbout" cols="40" rows="5"
              v-model="productModel.productDescribe"></textarea><br/><br/>

            上传商品主图<br /><br />
            <template>
                <div class="photo-wall">
                  <div v-for="(photo, index) in photos" :key="index" class="photo-item">
                    <img :src="photo.url" :alt="photo.name" class="el-upload-list__item-thumbnail">
                    <i class="el-icon-delete" @click="removePhoto(photo)"></i>
                  </div>
    
                  <div class="add-photo-box" @click="handleFileUpload">
                    <i class="el-icon-plus"></i>
                    <span>点击选择图片</span>
                  </div>
                  
                </div>
            </template>
            <br />
            <div style="margin: auto;width:20%;">
                <input type="button" value="下一步，完善商品信息" 
                @click="addProduct"
                style="background-color: blue; color: white; padding: 10px 10px 10px 10px;">
            </div>
          </form>

        <div>
            <iframe id="productInfo" src="" style="height: 0px;width: 0px; "></iframe>
        </div>
    </div>
    <script src="/js/backcommon.js"></script>
    <script>
        

    let vm = new Vue({
        el: "#app",
        data:{
            productModel:{
                productName:'',
                productDescribe:"",
                productPrice:""
            },
            categoryData:[],
            photos: [],
            files:[],
            addInfo:false,
            
        },
        created: function () {
            this.getAllCategory()
        },
        methods: {
            getAllCategory(){
                axios.get("/category/getAll").then(function (resp) {
                    vm.categoryData = resp.data.data
                });
            },
            handleFileUpload() {
                const input = document.createElement('input');
                input.type = 'file';
                input.accept = 'image/*';

                input.onchange = (event) => {
                const file = event.target.files[0];
                if (file) {
                    this.addPhoto(file);
                }
                };

                input.click();
            },
            addPhoto(file) {
                // 处理文件上传逻辑，比如使用 FileReader 将文件转为 Data URL
                const reader = new FileReader();

                reader.onload = (event) => {
                const photo = {
                    url: event.target.result,
                    name: file.name,
                };
                this.photos.push(photo);
                this.files.push(file)
                };
                reader.readAsDataURL(file);
            },
            removePhoto(file){
                for(var i in this.photos){
                    if (this.photos[i]==file){
                        this.photos.splice(i, 1);
                        break;
                    }
                    
                }
            },
            addProduct(){
                var iframe=document.getElementById("productInfo")
                
                const form =new FormData();
                if(vm.files.length!=0){
                    for(var index in vm.files)
                    form.append('files',vm.files[index])
                }
                axios({
                    url:'/product/insert',
                    method:'POST',
                    params:vm.productModel,
                    data:form,
                    config:{ Headers:{'Content-Type':'multipart/form-data'} }
                }).then(function(resp){
                    var productID=resp.data.data
                    if(productID!='' && productID!=0){
                        iframe.src = 'backProductInfoAddView.html?productID='+productID;
                    }
                    
                })
            }
        }
    })
    
    
    </script>
</body>
</html>